import { withRouter } from "react-router-dom"
import React, { Component } from 'react'
import { NavBar, Icon, Popover } from 'antd-mobile';
import "./header.scss"
const Item = Popover.Item;

class header extends Component {
  state = {
    visible: false,
    selected: '',
  };
  //点击返回
  // handleBackClick = (params) => {
  //   this.props.history.go(-1)
  // }
  // 
  onSelect = (opt) => {
    // console.log(opt.props.value);
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  };
  
  handleVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };
  goToHome = (params) => {
    this.props.history.push("/")
  };
  goToBangDan = (params) => {
    this.props.history.push("/bangDan")
  }
  goToReDian = (params) => {
    this.props.history.push("/reDian")
  }
  render() {
    return (
      <div>
        <NavBar className="NavBar"
          // icon={<Icon type="left" />}
          // onLeftClick={() => this.handleBackClick}
          rightContent={<Popover
            overlayClassName="fortest"
            overlayStyle={{ color: 'currentColor' }}
            visible={this.state.visible}
            overlay={[
              (<Item key="4" value="scan" data-seed="logId"><span onClick={this.goToHome}>首页</span></Item>),
              (<Item key="5" value="special" style={{ whiteSpace: 'nowrap' }}><span onClick={this.goToBangDan}>榜单</span></Item>),
              (<Item key="6" value="button ct" ><span  onClick={this.goToReDian} style={{ marginRight: 5 }}>热点</span></Item>),
            ]}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [-10, 0],
            }}
            onVisibleChange={this.handleVisibleChange}
            onSelect={this.onSelect}
          >
            <div style={{
              height: '100%',
              padding: '0 15px',
              marginRight: '-15px',
              display: 'flex',
              alignItems: 'center',
            }}
            >
              <Icon type="ellipsis" />
            </div>
          </Popover>}
        >猫眼电影</NavBar>
      </div>
    )
  }
}

export default withRouter(header)